<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue组件-数据传递</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div class="test-09">
			<component-01></component-01>
			<component-01></component-01>
			<component-01></component-01>
			
			<br/><br/>
			<component-02></component-02>
			
			<br/><br/>
			<b>传递数字，布尔值，数组，对象用v-bind</b>
			<component-03 message="[1,2,3]"></component-03>
			<component-03 :message="[1,2,3]"></component-03>
			
			<br/>
			<b>单项数据流1</b>
			<component-04 init-count="我是父组件哈"></component-04>
			
			<br/>
			<b>单项数据流2</b>
			<component-05 :width="200"></component-05>
			
			<br/>
			<b>数据验证：</b>
			<component-06 ></component-06>
		</div>
		<script>
			/*注册组件一定要在实例化Vue之前*/
			Vue.component("component-01",{
				data: function() {
					return {
						count:0
					}
				},
				template: "<button v-on:click='count++'>点击次数{{count}}</button>"
			});
			Vue.component("component-02",{
				data:function() {
					return {
						testMsg: test
					}
				},
				template: "<b>{{testMsg.message}}</b>"
			});
			Vue.component("component-03",{
				props: ["message"],
				data:function() {
					return {
					}
				},
				template: "<div>数组长度：{{message.length}}</div>"
			});
			Vue.component("component-04",{
				props: ["initCount"],
				data:function() {
					return {
						count: this.initCount
					}
				},
				template: "<div>父组件传来值：{{count}}</div>"
			});
			Vue.component("component-05",{
				props: ["width"],
				computed:{
					style:function() {
						return {
							width: this.width+'px',
							backgroundColor: "red"
						}
					}
				},
				template: "<div :style='style'>计算属性传宽度值：{{width}}</div>"
			});
			Vue.component("component-06",{
				data:function() {
					return{
						msg: "未完成，后续完善"
					}
				},
				props: {
					propA: Number,//必须是数字
					propB: [String,Number],//必须是字符串或数字
					propC: {//必须是布尔值，未定义则默认true
						type: Boolean,
						default: true
					},
					/*propD: {//数字，而且必须传
						type: Number,
						required: true
					},*/
					propE: {//如果为数组，则默认值用函数返回
						type: Array,
						default: function() {
							return [];
						}
					},
					propF: {//如果为对象，则默认值用函数返回
						type: Object,
						default: function() {
							return {};
						}
					},
					propG: {//自定义一个验证函数
						validator: function(val) {
							return val > 0;
						}
					}
				},
				template: "<button @click='alert(msg)'>点击</button>"
			});
			var test = {
				message: "外部消息调用案例"
			};
			var vm = new Vue({
				el: ".test-09",
				data: test
			});
		</script>
	</body>
</html>
